<template>
  <div class="singer-list">
    <div class="header">
      <h2>歌手列表</h2>
      <el-input
        v-model="searchKeyword"
        placeholder="搜索歌手"
        style="width: 300px"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button icon="Search" @click="handleSearch" />
        </template>
      </el-input>
    </div>

    <div class="filter-bar">
      <el-select v-model="selectedSex" placeholder="全部性别" @change="handleFilterChange">
        <el-option label="全部性别" value=""></el-option>
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="0"></el-option>
        <el-option label="组合" value="2"></el-option>
      </el-select>

      <el-select v-model="selectedFirstLetter" placeholder="首字母" @change="handleFilterChange" style="margin-left: 15px;">
        <el-option label="全部" value=""></el-option>
        <el-option v-for="letter in letters" :key="letter" :label="letter" :value="letter"></el-option>
      </el-select>
    </div>

    <div class="singer-grid">
      <el-card
        v-for="singer in singers"
        :key="singer.singerId"
        class="singer-card"
        @click="goToSingerDetail(singer.singerId)"
      >
        <div class="singer-avatar">
          <img
            :src="singer.singerPic || singerDefaultImage"
            :alt="singer.singerName"
            @error="handleImageError"
          />
        </div>
        <div class="singer-info">
          <h3>{{ singer.singerName }}</h3>
          <p class="singer-brief">{{ singer.singerIntro || '暂无简介' }}</p>
        </div>
      </el-card>
    </div>

    <div class="pagination" v-if="singers.length > 0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        layout="prev, pager, next, jumper, ->, total"
        @current-change="handlePageChange"
      />
    </div>

    <el-empty v-if="singers.length === 0 && !loading" description="暂无歌手数据" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getSingerList } from '@/services/singer'
import { ElMessage } from 'element-plus'
import defaultImage from '@/assets/img/singer-default.png'

export default {
  name: 'SingerList',
  setup() {
    const router = useRouter()

    const singerDefaultImage = defaultImage

    // 数据状态
    const singers = ref([])
    const loading = ref(false)
    const searchKeyword = ref('')
    const selectedSex = ref('')
    const selectedFirstLetter = ref('')

    // 字母筛选
    const letters = ref('ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''))

    // 分页相关
    const currentPage = ref(1)
    const pageSize = ref(20)
    const total = ref(0)

    // 获取歌手列表
    const fetchSingers = async () => {
      try {
        loading.value = true
        const params = {
          pageNum: currentPage.value,
          pageSize: pageSize.value
        }

        // 根据筛选条件添加参数
        if (searchKeyword.value.trim()) {
          params.singerName = searchKeyword.value.trim()
        }
        if (selectedSex.value !== '') {
          params.singerSex = selectedSex.value
        }
        if (selectedFirstLetter.value !== '') {
          params.singerFirstLetter = selectedFirstLetter.value
        }

        console.log('查询参数:', params) // 添加调试日志

        const response = await getSingerList(params)
        if (response.code === '1') {
          singers.value = response.data.list || response.data.records || []
          total.value = response.data.total || 0
        } else {
          ElMessage.error(response.message || '获取歌手列表失败')
        }
      } catch (error) {
        console.error('Fetch singer list error:', error)
        ElMessage.error('获取歌手列表失败: ' + error.message)
      } finally {
        loading.value = false
      }
    }

    // 搜索歌手
    const handleSearch = () => {
      currentPage.value = 1
      fetchSingers()
    }

    // 筛选条件改变
    const handleFilterChange = () => {
      currentPage.value = 1
      fetchSingers()
    }

    // 处理分页变化
    const handlePageChange = (page) => {
      currentPage.value = page
      fetchSingers()
    }

    // 跳转到歌手详情页
    const goToSingerDetail = (singerId) => {
      router.push(`/singers/${singerId}`)
    }

    // 处理图片加载错误
    const handleImageError = (e) => {
      e.target.src = singerDefaultImage
    }

    // 初始化加载
    onMounted(() => {
      fetchSingers()
    })

    return {
      singers,
      loading,
      searchKeyword,
      selectedSex,
      selectedFirstLetter,
      letters,
      currentPage,
      pageSize,
      total,
      singerDefaultImage,
      handleSearch,
      handleFilterChange,
      handlePageChange,
      goToSingerDetail,
      handleImageError
    }
  }
}
</script>

<style scoped>
.singer-list {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
}

.filter-bar {
  margin-bottom: 20px;
  display: flex;
}

.singer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.singer-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 300px;
  display: flex;
  flex-direction: column;
}

.singer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.singer-avatar {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 4px;
  flex-shrink: 0;
}

.singer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.singer-info {
  padding: 15px 10px 10px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.singer-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.singer-brief {
  margin: 0;
  color: #666;
  font-size: 14px;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pagination {
  display: flex;
  justify-content: center;
}
</style>
